<template>
    <tr>
        <td v-if="isEdited==false">{{ roomusage.classroomId }}</td>
        <td v-if="isEdited==false">{{ roomusage.courseId }}</td>
        <td v-if="isEdited==false">{{ roomusage.classId }}</td>
        <td v-if="isEdited==false">{{ roomusage.teacherId }}</td>
        <td v-if="isEdited==false">{{ roomusage.classroomStatus }}</td>
        <td v-if="isEdited==false">
            {{ roomusage.usageTime }}
        </td>
        <td v-if="isEdited==false">
            <el-button type="primary" icon="el-icon-edit" circle @click='edit'></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete"></el-button>
        </td>
        <td v-if="isEdited==true">
                <el-input type="text" v-model.number="roomusage.classroomId" class="w-50"></el-input>
        </td>
        <td v-if="isEdited==true">
                <el-input type="text" v-model="roomusage.courseId" class="w-75"></el-input>   
                <!-- <SelectPlace/> -->
        </td>
        <td v-if="isEdited==true">
                <el-input type="text" v-model.number="roomusage.classId" class="w-50"></el-input>
        </td>
        <td v-if="isEdited==true">
                <el-input type="text" v-model.number="roomusage.teacherId" class="w-50"></el-input>
        </td>
        <td v-if="isEdited==true">
                <!-- <el-input type="text" v-model.number="roomusage.classroomStatus" class="w-50"></el-input> -->
                <el-select v-model="roomusage.classroomStatus" class="w-50"  placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
        </td>
        <td v-if="isEdited==true">
                <!-- <el-input type="text" v-model="roomusage.usageTime" class="w-50" maxlength="50"></el-input> -->

                <el-date-picker class="w-50"
                v-model="roomusage.usageTime"
                type="datetime"
                placeholder="选择日期时间"
                format = "yyyy-MM-dd HH:mm:ss"
                value-format = "yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </td>

        <td v-if="isEdited==true">
         <el-button type="success" icon="el-icon-check" circle @click="save"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete"></el-button>
        </td>
    </tr>
    
    
</template>

<script>
import axios from 'axios'
// import SelectPlace from "./SelectPlace"
export default {
    name:"Item",
    props:["roomusage"],
    data() {
        return { 
            isEdited:false,
            options: [{
                value: '空闲中',
                label: '空闲中'
                }, {
                value: '使用中',
                label: '使用中'
                }],
        }
    },
    components: {
        // SelectPlace
    },
    methods: {
        edit(){
            this.isEdited=true;
            console.log(this.$route.params);
        },
       async save(){
            
                await axios({
                url:"http://localhost:8080/classroom_Usage/update",
                method:"POST",
                data:this.roomusage
            })
            this.isEdited=false;
            
        },
        handleDelete(){
           this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await  axios({
                url:"http://localhost:8080/classroom_Usage/delete/",
                method: 'POST',
                data:{
                    id:this.roomusage.id
                }
            })
            this.$emit('reloadTable');
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        }
    },
    filters: {
    }

}
</script>

<style scoped>
    input{
        height:30px
    }
    td{
        width:60px
    }
</style>